import { Layout } from 'antd';
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import type { RootState } from '../store';
import { updateCollapse } from '../store/modules/menu'
import LayoutHeader from './components/Header';
import LayoutFooter from './components/Footer';
import LayoutMenu from './components/Menu';
import './style/index.scss'
import { Outlet } from "react-router-dom";
import LayoutTabs from './components/Tabs';

const LayoutComponent: React.FC = () => {
  const { Sider, Content } = Layout;
  const { isCollapse } = useSelector((state: RootState) => state.menu);

  // 监听窗口大小变化
  const listeningWindow = () => {
    window.onresize = () => {
      return (() => {
        const screenWidth = document.body.clientWidth
        if (!isCollapse && screenWidth < 1200) updateCollapse(true)
        if (isCollapse && screenWidth > 1200) updateCollapse(false)
      })
    }
  }

  useEffect(() => {
    listeningWindow()
  }, [])

  return (
    <>
      <section className="layout-box">
        <Sider className="sider-box" trigger={null} collapsed={isCollapse} width={220} theme='dark'>
          <LayoutMenu />
        </Sider>
        <Layout>
          <LayoutHeader />
          <LayoutTabs />
          <Content>
            <Outlet />
          </Content>
          <LayoutFooter />
        </Layout>
      </section>
    </>
  )
}

export default LayoutComponent;